<template>
    <div>
        <div class="topContainer">
            <!--<swiper class="banner" :options="swiperOption">-->
            <!--<swiper-slide v-for="item of bannerList" :key="item.id">-->
            <!--<img class="swiper-img" :src="item.imgUrl" />-->
            <!--</swiper-slide>-->
            <!--<div class="swiper-pagination"  slot="pagination"></div>-->
            <!--</swiper>-->
            <mt-swipe class="banner" :auto="0">
                <mt-swipe-item v-for="item of bannerList" :key="item.id">
                    <img class="swiper-img" :src="item.imgUrl"
                         @click="onClickBanner(item)"/>
                </mt-swipe-item>
            </mt-swipe>
            <HomeHeader class="header"/>
        </div>
        <ul class="iconList">
            <li v-for="icon of iconList" :key="icon.id" @click="clickIcon(icon)">
                <img :src="icon.img"/>
                <p>{{icon.title}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    import top from '../assets/icon_top.png'
    import hot from '../assets/icon_hot.png'

    import {Swipe, SwipeItem} from 'mint-ui';

    import HomeHeader from '@/components/HomeHeader'

    export default {
        name: "Home",
        components: {
            HomeHeader,
            Swipe,
            SwipeItem
        },
        data(iconList = iconList) {
            return {
                iconList: [
                    {id: 1, img: top, title: "top250"},
                    {id: 2, img: hot, title: "热门"},
                    {id: 3, img: top, title: "top250"},
                    {id: 4, img: hot, title: "热门"},
                    {id: 5, img: top, title: "top250"},
                    {id: 6, img: hot, title: "热门"},
                    {id: 7, img: top, title: "top250"},
                    {id: 8, img: hot, title: "热门"}
                ],
                bannerList: [
                    {
                        id: 1,
                        imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550056964489&di=fe574433fdeeb383b0526db5dc1b3337&imgtype=0&src=http%3A%2F%2Fweex.incubator.apache.org%2Fguide%2Fimages%2Fvue-rax.png"
                    },
                    {
                        id: 2,
                        imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550056964489&di=eca887913036dbd7e6bea8b4700e4ccc&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e16556d63fdb32f875520f2a8ccc.jpg%401280w_1l_2o_100sh.jpg"
                    }
                ],
                swiperOption: {
                    pagination: '.swiper-pagination',
                    loop: true
                }
            }
        },
        created() {
        },
        methods: {
            clickIcon(icon) {
                this.$router.push({name: 'hot'})
            },
            onClickBanner(item) {
                console.log("点击" + item.id)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .topContainer {
        width: 100%;
        height: 180px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }

    .topContainer .banner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .swiper-img {
        width: 100%;
        height: 100%;
    }

    .header {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        background-color: black;
        -moz-opacity: 0.1;
        opacity: 0.1;
    }

    .iconList {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    .iconList li {
        width: 25%;
        height: 50%;
        float: left;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .iconList li img {
        width: 30px;
        height: 30px;
    }
</style>
